<template>
  <header>
    <div class="home-head">
      <div class="home-head-left">外卖</div>
      <div class="home-head-right">
        <!-- 右侧信息 -->
        <span>Taoeach</span>
        <van-icon name="arrow" />
      </div>
    </div>
  </header>
  <main>
    <div class="home-body">
      <!-- 搜索框 -->
      <van-search shape="round" placeholder="请输入搜索内容" v-model="state.search_info"></van-search>
      <div class="home-body-main-big_sort">
        <!-- big_sort -->
        <div class="font-icon-big_sort" v-for="(item, index) in state.big_sort" :key="index">
          <!-- 图标库 -->
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#${item.icon}`"></use>
          </svg>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <!-- Small_Sort -->
      <div class="home-body-main-small_sort">
        <div class="font-icon-small_sort" v-for="(item, index) in state.small_sort" :key="index">
          <!-- 图标库 -->
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#${item.icon}`"></use>
          </svg>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <!-- Tab栏 -->
      <div class="home-body-main-tabs">
        <van-tabs v-model:active="state.tabsIndex">
          <van-tab :title="item.tab" v-for="(item, index) in state.centent_nav_list" :key="index">
            <listNav :FoodsInfo="item.data"></listNav>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </main>
</template>

<script>
import { getSort } from '../../api/catInfo'
import listNav from '../../components/listNav.vue'
export default {
  components: { listNav },
  data() {
    return {
      state: {
        search_info: '', // 搜索框内容
        tabsIndex: '', // Tab栏内容
        big_sort: [
          {
            name: '美食',
            icon: 'icon-meishi'
          },
          {
            name: '甜点饮品',
            icon: 'icon-yinliao'
          },
          {
            name: '超市便利',
            icon: 'icon-chaoshi'
          },
          {
            name: '生鲜果蔬',
            icon: 'icon-juzi'
          },
          {
            name: '买药',
            icon: 'icon-yaopin'
          }
        ],
        small_sort: [
          {
            name: '午餐',
            icon: 'icon-wucan'
          },
          {
            name: '买酒',
            icon: 'icon-jiushui1'
          },
          {
            name: '新鲜水果',
            icon: 'icon-xiangjiao'
          },
          {
            name: '汉堡披萨',
            icon: 'icon-hanbao'
          },
          {
            name: '休闲饮品',
            icon: 'icon-yinliao'
          },
          {
            name: '夜宵',
            icon: 'icon-yexiao'
          },
          {
            name: '吐司',
            icon: 'icon-tusi'
          },
          {
            name: '跑腿',
            icon: 'icon-paotuiAPP'
          },
          {
            name: '美人佳丽',
            icon: 'icon-kouhong'
          },
          {
            name: '全部分类',
            icon: 'icon-quanbufenlei'
          }
        ],
        // 商品信息
        centent_nav_list: []
      }
    }
  },
  methods: {
    // 获取NavList信息
    async obtainNavList() {
      const { data: res } = await getSort()
      console.log(res)
      this.state.centent_nav_list = res
    }
  },
  created() {
    this.obtainNavList()
  }
}
</script>

<style lang="less">
.home-head {
  box-sizing: border-box;
  height: 70px;
  padding: 15px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(#ffc400, #f1e8e8); // 渐变色
  .home-head-left {
    font-weight: bold;
  }
}
.home-body {
  height: 100%;
  margin-top: -10px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background-color: #f2f2f2;
  margin-bottom: 60px;
  .van-search {
    border-radius: 15px !important;
    background-color: #f2f2f2;
    .van-search__content {
      border: solid 1px #ffc400;
    }
  }
  .home-body-main-big_sort {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    // height: 100%;
    .font-icon-big_sort {
      display: flex;
      width: 20%;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      font-size: 16px;
      margin: 10px 0;
      .icon {
        width: 40px;
        height: 40px;
      }
    }
  }
  .home-body-main-small_sort {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    justify-content: space-between;
    overflow: scroll;
    .font-icon-small_sort {
      display: flex;
      flex: 20%;
      margin: 5px 0;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      font-size: 12px;
      .icon {
        width: 30px;
        height: 30px;
      }
    }
  }
  .home-body-main-tabs {
    margin: 10px;
    .van-tabs__wrap {
      border-radius: 15px;
    }
  }
}
</style>
